<!--
 * @Descripttion: 
 * @version: 
 * @Author: 程
 * @Date: 2022-12-01 11:32:04
 * @LastEditors: 程
 * @LastEditTime: 2023-04-18 14:49:42
-->
<template>
  <div class="main">
    <h3>{{ $t('tool.directory4') }}</h3>
    <div class="line"></div>
    <div class="card">
      <el-card class="card-item" v-for="item in items.list" :key="item.id" @click="toUrl(item.url)">
        <div class="title">{{ item.text }}</div>
        <img class="logo" :src="item.img" alt="" />
        <div class="intr">{{ item.introduction }}</div>
      </el-card>
    </div>
  </div>
</template>
<script setup lang="ts">
const items = reactive({
  list: [
    { id: 1, text: 'Vue 插件库', introduction: 'Vue 插件库合集/大全/搜索', img: getImageUrl('vue'), url: 'https://www.vue365.cn/' },
    { id: 2, text: 'Swiper', introduction: '开源、免费、强大的触摸滑动插件', img: getImageUrl('swiper'), url: 'https://www.swiper.com.cn/' },
    { id: 3, text: 'Animate', introduction: '超级简单的动画插件', img: getImageUrl('animate'), url: 'https://animate.style/' },
    { id: 4, text: 'Tailwindcss', introduction: '无需离开您的HTML，即可快速建立现代网站。', img: getImageUrl('tailwindcss'), url: 'https://www.tailwindcss.cn/' },
    { id: 5, text: 'Threejs', introduction: 'Three.js是一款WebGL三维引擎', img: getImageUrl('threejs'), url: 'https://threejs.org/' },
    { id: 2, text: 'TypeScript', introduction: 'TypeScript入门教程', img: getImageUrl('tslang'), url: 'https://roadmap.sh/roadmaps' },
    { id: 3, text: 'ThreeJs', introduction: 'ThreeJs入门教程', img: getImageUrl('threejs'), url: 'http://www.yanhuangxueyuan.com/' },
    { id: 6, text: 'TypeScript', introduction: 'TypeScript是JavaScript类型的超集。', img: getImageUrl('tslang'), url: 'https://www.tslang.cn/index.html' },
    { id: 7, text: 'Vxetable', introduction: '一个基于 vue 的 PC 端复杂表格组件', img: getImageUrl('vxetable'), url: 'https://vxetable.cn/#/table/start/install' },
    { id: 8, text: 'Vue3VideoPlay', introduction: '适用于 Vue3 的hls.js播放器组件', img: getImageUrl('vue3videoplay'), url: 'https://codelife.cc/vue3-video-play/' },
    { id: 9, text: 'Muiplayer', introduction: '一个优秀的HTML5监控视频播放器框架', img: getImageUrl('muiplayer'), url: 'https://muiplayer.js.org/' },
    { id: 10, text: 'Vue3SeamlessScroll', introduction: '一个基于 vue3 的滚动列表组件', img: getImageUrl('vue3SeamlessScroll'), url: 'https://github.com/xfy520/vue3-seamless-scroll' },
    { id: 11, text: 'Vue2SeamlessScroll', introduction: '一个基于 vue2 的滚动列表组件', img: getImageUrl('vue3SeamlessScroll'), url: 'https://chenxuan1993.gitee.io/component-document/index_prod#/component/seamless-others' },
    { id: 12, text: 'V3Directives', introduction: '一个Vue3自定义指令库合集', img: getImageUrl('directives'), url: 'https://github.com/QishuangWang/v3-directives' },
    { id: 13, text: 'Lodash', introduction: 'Lodash 是一个高性能的 JavaScript 实用工具库。', img: getImageUrl('lodash'), url: 'https://www.lodashjs.com/' },
    { id: 14, text: 'Json2ts', introduction: 'Typescript快捷类型转换工具', img: getImageUrl('json2ts'), url: 'http://www.json2ts.com/' },
    { id: 15, text: 'Colorhunt', introduction: '一个色彩搭配大全网站', img: getImageUrl('colorhunt'), url: 'https://colorhunt.co/' },
    { id: 16, text: 'Carbon', introduction: '一个代码截图网站', img: getImageUrl('carbon'), url: 'https://carbon.now.sh/' },
    { id: 17, text: 'UniAppDcloud', introduction: '一个uniapp的插件市场大全', img: getImageUrl('uniappdcloud'), url: 'https://ext.dcloud.net.cn/' },
    { id: 18, text: 'Regulex', introduction: 'JavaScript 正则表达式可视化工具', img: getImageUrl('regulex'), url: 'https://jex.im/regulex/#!flags=&re=%5E(a%7Cb)*%3F%24' },
    { id: 19, text: 'SortableJS', introduction: '功能强大的JavaScript 拖拽库', img: getImageUrl('sortable'), url: 'http://www.sortablejs.com/index.html' },
    { id: 20, text: 'SnippetGenerator', introduction: '一个VsCode代码片段一键生成网站', img: getImageUrl('snippetgenerator'), url: 'https://snippet-generator.app/?description=&tabtrigger=&snippet=&mode=vscode' },
    { id: 21, text: 'GridGenerator', introduction: '一个Grid布局代码生成网站', img: getImageUrl('gridgenerator'), url: 'https://cssgrid-generator.netlify.app/' },
    { id: 22, text: 'Codelf', introduction: '变量名称生成大全网站', img: getImageUrl('codelf'), url: 'https://unbug.github.io/codelf/' },
    { id: 23, text: 'DayJs', introduction: 'Day.js 是一个轻量的处理时间和日期的 JS 库', img: getImageUrl('dayjs'), url: 'https://dayjs.gitee.io/zh-CN/' },
    { id: 24, text: 'Vue Multiselect', introduction: 'Vue.js 的通用选择/多选/标记组件', img: getImageUrl('vue'), url: 'https://vue-multiselect.js.org/' },
    { id: 25, text: 'Vue Print', introduction: '用于印刷、简单、快速、方便、轻便的指令包装器', img: getImageUrl('print'), url: 'https://github.com/Power-kxLee/vue-print-nb' },
    { id: 26, text: 'Vue I18n', introduction: 'Vue3的国际化插件', img: getImageUrl('vuei18n'), url: 'https://vue-i18n.intlify.dev/' },
    { id: 27, text: 'Vue Cropper', introduction: '简单的vue图片裁剪插件', img: getImageUrl('cropper'), url: 'http://github.xyxiao.cn/vue-cropper/example/' },
    { id: 28, text: 'Vue Qrcode Reader', introduction: '允许在不离开浏览器的情况下检测和解码二维码', img: getImageUrl('qrcodereader'), url: 'https://gruhn.github.io/vue-qrcode-reader/' },
    { id: 29, text: 'Better Scroll', introduction: '解决移动端/PC 各种滚动场景需求的插件。', img: getImageUrl('better'), url: 'https://better-scroll.github.io/docs/zh-CN/' },
    { id: 30, text: 'Vue Press', introduction: 'Vue 驱动的静态网站生成器', img: getImageUrl('vuepress'), url: 'https://v2.vuepress.vuejs.org/zh/' },
    { id: 31, text: 'Calendar', introduction: '获取中国农历公历转化(万年历Web组件)', img: getImageUrl('calendar'), url: 'https://passer-by.com/calendar/' },
    { id: 32, text: 'LuckyCanvas', introduction: '小程序/vue/react/uni抽奖插件', img: getImageUrl('cj'), url: 'https://github.com/buuing/lucky-canvas' },
    { id: 33, text: 'Antv', introduction: 'X6 图编辑引擎', img: getImageUrl('antd'), url: 'https://x6.antv.antgroup.com/' },
  ],
});
function getImageUrl(name: string) {
  const careList = ['vuei18n', 'better', 'calendar', 'antd'];
  if (careList.includes(name)) {
    return new URL(`/tool/${name}.svg`, import.meta.url).href;
  } else {
    return new URL(`/tool/${name}.png`, import.meta.url).href;
  }
}
function toUrl(url: string) {
  window.open(url);
}
</script>

<style lang="scss" scoped>
.main {
  width: 100%;
  padding-bottom: 50px;
  background: var(--home-bg-color, #f5f6fb);
  padding-top: 50px;
  h3 {
    font-size: 28px;
    margin-bottom: 10px;
    margin-left: 50px;
  }
  .line {
    height: 1px;
    background: #ccc;
    margin-left: 50px;
    width: 95%;
    margin-bottom: 20px;
  }
}
.card {
  display: grid;
  grid-template-rows: repeat(1, 1fr);
  grid-template-columns: repeat(6, 1fr);
  place-items: center;
  gap: 15px;
  margin-top: 15px;
  &-item:hover {
    cursor: pointer;
    transform: scale(1.2);
  }
  &-item {
    width: 200px;
    height: 200px;
    display: grid;
    place-content: center;
    cursor: pointer;
    text-align: center;
    .logo {
      width: 80px;
      height: 80px;
      margin: 0 auto;
      margin-top: 10px;
    }
    .title {
      font-size: 14px;
      font-family: Source Han Sans CN;
      font-weight: 500;
      color: var(--home-text-color, #000);
      margin-top: -10px;
    }
    .intr {
      font-weight: bold;
      color: var(--home-tips-color, #606266);
      height: 20px;
      margin-top: 20px;
      line-height: 20px;
    }
  }
}
</style>
